package io.wongxd.demo.page.views

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import io.wongxd.demo.M
import io.wongxd.demo.rememberPainter
import io.wongxd.solution.baseView.BaseComposeToolBarFgt
import io.wongxd.solution.compose.custom.views.banner.Banner
import io.wongxd.solution.compose.custom.views.banner.rememberBannerState
import io.wongxd.solution.compose.custom.views.compose_pager.ComposePager
import io.wongxd.solution.compose.custom.views.compose_pager.rememberComposePagerState
import io.wongxd.solution.compose.custom.views.flow_layout.FlowLayout
import io.wongxd.solution.compose.custom.views.image_banner.ImageBanner
import io.wongxd.solution.compose.custom.views.other.FpsText
import io.wongxd.solution.compose.custom.views.other.VerticalSpace
import io.wongxd.solution.compose.custom.views.pager_indicator.PagerIndicator

class FgtViewPageIndicator : BaseComposeToolBarFgt() {
    override fun lazyInit() {

    }

    override val title: String
        get() = "FgtViewPageIndicator"

    @Composable
    override fun Render() {
        ComposeContent()
    }

    private val colors = mutableStateListOf(
        Color(150, 105, 61, 255),
        Color(122, 138, 55, 255),
        Color(50, 134, 74, 255),
        Color(112, 62, 11, 255),
        Color(114, 61, 101, 255),
    )
    private val orientation = mutableStateOf(Orientation.Horizontal)

    @Composable
    private fun ComposeContent() {
        Column(M.fillMaxSize()) {
            Menu()

            BannerView()
            VerticalSpace(dp = 10)
            PagerView()
            VerticalSpace(dp = 10)
            Images()
        }
    }

    @Composable
    private fun Menu() {
        FlowLayout(horizontalMargin = 10.dp) {
            FpsText(modifier = Modifier)
            Button(onClick = {
                orientation.value = if (orientation.value == Orientation.Horizontal)
                    Orientation.Vertical
                else
                    Orientation.Horizontal
            }) {
                Text(text = "改变滑动方向")
            }
        }
    }

    @Composable
    private fun BannerView() {
        val bannerState = rememberBannerState()
        Box(
            modifier = M
                .fillMaxWidth()
                .height(200.dp)
        ) {
            Banner(
                colors.size,
                M.fillMaxSize(),
                bannerState = bannerState,
                autoScrollTime = 1000,
                orientation = orientation.value,
            ) {
                Box(
                    modifier = M
                        .fillMaxSize()
                        .background(colors.getOrNull(index) ?: Color.Black)
                ) {
                    Button(onClick = {
                        "index=$index".showToast()
                    }, modifier = M.align(Alignment.Center)) {
                        Text(text = this@Banner.index.toString(), fontSize = 30.sp)
                    }
                }
            }
            PagerIndicator(
                size = colors.size,
                offsetPercentWithSelectFlow = remember { bannerState.createChildOffsetPercentFlow() },
                selectIndexFlow = remember { bannerState.createCurrSelectIndexFlow() },
                indicatorItem = {
                    Spacer(
                        modifier = M
                            .size(10.dp)
                            .background(
                                Color.Gray,
                                CircleShape
                            )
                    )
                },
                selectIndicatorItem = {
                    Spacer(
                        modifier = M
                            .size(10.dp)
                            .background(Color.Black, CircleShape)
                    )
                },
                modifier = M
                    .align(Alignment.BottomCenter)
                    .padding(10.dp),
                orientation = orientation.value,
            )
        }
    }

    @Composable
    private fun PagerView() {
        val pagerState = rememberComposePagerState()
        Box(
            modifier = M
                .fillMaxWidth()
                .height(100.dp)
        ) {
            ComposePager(
                colors.size,
                M.fillMaxSize(),
                composePagerState = pagerState,
                orientation = orientation.value,
            ) {
                Box(
                    modifier = M
                        .fillMaxSize()
                        .background(colors.getOrNull(index) ?: Color.Black)
                ) {
                    Button(onClick = {
                        pagerState.setPageIndexWithAnimate(
                            if (index + 1 >= colors.size)
                                0
                            else
                                index + 1
                        )
                    }, modifier = M.align(Alignment.Center)) {
                        Text(text = this@ComposePager.index.toString(), fontSize = 30.sp)
                    }
                }
            }
            PagerIndicator(
                size = colors.size,
                offsetPercentWithSelectFlow = remember { pagerState.createChildOffsetPercentFlow() },
                selectIndexFlow = remember { pagerState.createCurrSelectIndexFlow() },
                indicatorItem = {
                    Spacer(
                        modifier = M
                            .size(10.dp)
                            .background(
                                Color.Gray,
                                CircleShape
                            )
                    )
                },
                selectIndicatorItem = {
                    Spacer(
                        modifier = M
                            .size(10.dp)
                            .background(Color.Black, CircleShape)
                    )
                },
                modifier = M
                    .align(Alignment.BottomCenter)
                    .padding(10.dp),
                orientation = orientation.value,
            )
        }
    }

    val images = listOf(
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F66b7ce397068c1f4710cafe4e1827ab5f7565180.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665065304&t=c45a94bbac62a3bd502dc53e40afc583",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fc0793b2877f09ded49e96e3b3e05781d4f1e2e9e.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665065303&t=86940ecb5bf20d1c90b5fb1c1f0afb06",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F79c593c97cb1aef62160a7c6165ea3ecdc60f064.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665065301&t=0d840bcfe779bcac4ea65db6d257c417",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F2726b76584c11dc75449024ad6105893be1edd0f.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665065300&t=7afae3a8eccb498fb37d54ff54d2016b",
    )

    @Composable
    private fun Images() {
        ImageBanner(
            imageSize = images.size,
            imageContent = {
                Image(
                    painter = rememberPainter(data = images[index]),
                    contentDescription = "",
                    modifier = Modifier
                        .fillMaxSize()
                        .clickable { onItemClick(index) },
                    contentScale = ContentScale.Crop
                )
            },
            indicatorItem = {
                Spacer(
                    modifier = M
                        .size(6.dp, 6.dp)
                        .background(Color.Gray, CircleShape)
                )
            },
            selectIndicatorItem = {
                Spacer(
                    modifier = M
                        .size(12.dp, 6.dp)
                        .background(Color(72, 199, 108), CircleShape)
                )
            },
            modifier = M
                .fillMaxWidth()
                .height(200.dp),
            orientation = orientation.value,
            autoScrollTime = 1500,
        )
    }

    private fun onItemClick(index: Int) {
        "index=$index".showToast()
    }

    @Preview(showBackground = true, backgroundColor = 0xffffffff)
    @Composable
    fun RenderPreView() {

    }
}